<template>
	<view class="box">
		<view class="input"><input type="text" placeholder="输入关键字查询" style="width: 349px;padding-left: 30px;box-sizing: border-box;  height: 32px;margin: auto; border-radius: 25px; border: 1px solid #6e99ff; background-color: white;"></view>
		<nav1 />
		<nav2 />
		<view class="nav3">
			<view class="minbox" v-for="(item,index) in items" :key="index">	
				<view class="text">{{item.name1}}</view>
				<view class="descc" :class="{'btna':count ===index}" @tap="change(index)">{{item.name2}}</view>
				<!-- 判断条件成立 类名成立 -->
			</view>
		</view>
		<view class="disinfo" :class="{dis:count ===0}">
			<!-- 判断条件成立 进行显示或隐藏 使用css属性display ，类似选项卡 -->
			<listxihuan />
		</view>
		<view class="disinfo" :class="{dis:count ===1}">
			<listyouxuan />
		</view>
		<view class="disinfo" :class="{dis:count ===2}">
			<listzaimai />
		</view>
		<view class="disinfo" :class="{dis:count ===3}">
			<listzhicai />
		</view>
	</view>
</template>

<script>
	import unisearchbar from "../../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue"
	import nav1 from "../../../uni_modules/nav/nav1.vue"
	import nav2 from "../../../uni_modules/nav/nav2.vue"
	import listxihuan from "../../../uni_modules/listxihuan/listxihuan.vue"
	import listyouxuan from "../../../uni_modules/listyouxuan/listyouxuan.vue"
	import listzaimai from "../../../uni_modules/listzaimai/listzaimai.vue"
	import listzhicai from "../../../uni_modules/listzhicai/listzhicai.vue"
	import axios from 'axios'
	export default{
		data(){
			return{
				items:[
					{name1:"全部",name2:"猜你喜欢"},
					{name1:"时令",name2:"当季优选"},
					{name1:"进口",name2:"国际直采"},
					{name1:"人气",name2:"大家在买"}
				],
					count:0,
			}
		},
		methods:{
			change(index){
				this.count=index
			}
		},
		mounted() {
		
		},
		components:{
			nav1,
			nav2,
			listxihuan,
			listyouxuan,
			listzaimai,
			listzhicai
		},
	}
</script>

<style lang="scss" scoped>
	uni-page-body{
		background-color: rgb(242,242,242);
	}
	.input{
		padding-top: 8px;
	}
	nav2{
		background-color: white;
	}
	.nav3{
		display: flex;
		padding: 10px;
		.minbox{
			width: 25%;
			text-align: center;
		}
	}
	.descc{
		color: rgb(204,204,208);
	}
	.btna{
		background-color: rgb(8,175,254);
		color: white;
		border-radius: 15px;
		font-size: 16px;
		padding: 1px 2px;
		box-sizing: border-box;
	}
	.text{
		font-size: 20px;
		font-weight: 500;
		margin: 10px 0;
	}
	
	
	.disinfo{
		display: none;
	}
	.dis{
		display: block;
	}
</style>
